iT邦幫忙

2022 iThome 鐵人賽

DAY 2
1
Modern Web

前端開發維護筆記 - 打造健康的前端專案系列 第 2

必修的型別系統 TypeScript

  • 分享至 

  • xImage
  •  

如果還不知道什麼是 TypeScript 的話,可以參考一下這本中文的電子書 TypeScript 新手指南

簡單的定義就是:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

翻譯成中文即是:

TypeScript 是 JavaScript 的型別的超集,它可以編譯成純 JavaScript。編譯出來的 JavaScript 可以執行在任何瀏覽器上。TypeScript 編譯工具可以執行在任何伺服器和任何系統上。TypeScript 是開源的。

這篇文章不會從基礎語法開始一步一步的教學如何安裝使用 TypeScript,我主要想分享的是為何要使用、解決了什麼問題、實務上如何開始…這類的議題。

為什麼 TypeScript 這麼重要

為什麼選擇 TypeScript 作為第一個介紹的工具呢?

因為根據我自己與身邊許多朋友的經驗來說,很多人 TypeScript 寫習慣以後,就沒辦法回去寫純粹的 JavaScript 了,型別系統真的就是有這麼大的影響力。

而且在前端開發的領域,TypeScript 影響力已經非常巨大,甚至已經成為許多公司徵才的必備技能了。

而型別系統到底能為我們帶來什麼呢?

避免了可能的錯誤

你可以試著思考一下這個情境:

當需求或是 Bug 需要你調整專案中的共用 function 時,該如何確保改動不會造成破壞?
又如何避免其他合作的開發者錯誤的使用?

在調整共用 function,尤其是牽扯到業務邏輯的時候,是非常有可能會改動到 function 參數或回傳值的,想想看如果有同事修改了共用 function 的參數後更新到主要分支,而你還在開發分支上用原本的參數來呼叫這個 function,會發生什麼慘劇呢?

很可能你所負責的某個功能在 merge 之後突然就壞了,然後 PM 甚至是使用者的怒火一時間全都指向了你,這時你又何其無辜呢?

但如果專案有使用 TypeScript,開 Pull Request 以前也有先做 rebase 或把主幹 merge 進開發分支的話,你就可以馬上透過 TypeScript 的型別錯誤發現原來這個 function 的使用方式改變了。

而如果你就是調整共用 function 的那個人,TypeScript 搭配 VSCode 之類的編輯器,還能幫助你快速找到 function 被引入的地方,以及透過 tsc 的檢查快速確認是否有嚴重的錯誤。

讓套件、組件更好用

我們再來看看這個情境:

被指派要在你負責的專案中引入同事開發的套件,但這個套件沒有詳細的文件或文件已經過時沒有參考價值。

要知道比起社群維護的公開套件,內部套件沒有文件可以參考的機率可是很高的,這時候你要如何使用呢?通常就只能看開發組件的人是如何使用的對吧?

但如果有型別系統,本身就可以帶有一部分的文件功能(當然如果還帶有測試就更好了),可以幫助你在缺少必要參數的時候快速補上,又或者你的使用方式有所誤解,帶入了格式錯誤的資料時,型別系統也能快速的幫你找到問題。

而且不只如此,如果套件本身也有完整的 TypeScript 型別,在你使用套件的時候編輯器能準確的判斷出有哪些屬性、方法可以讓你使用,使用到不存在的屬性或方法時也一樣會馬上提醒,大大的提升了開發體驗。


今天主要是分享為什麼要使用 TypeScript,以及使用 TypeScript 能帶給我們怎麼樣的好處,明天就來分享實際上使用 TypeScript 必要的小技巧囉。


上一篇
專案維護性的重要
下一篇
TypeScript 初心者實戰指南
系列文
前端開發維護筆記 - 打造健康的前端專案27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
rocketpencil
iT邦新手 5 級 ‧ 2022-09-19 00:45:53

何其有幸能見到此篇管文!!!

我要留言

立即登入留言